<script lang="ts">
import { findIndex } from 'lodash-es'
import { Component, Vue } from 'vue-property-decorator'

import { stateMap } from './const'

@Component({
  name: 'Search'
})
export default class Search extends Vue {
  keyword = ''
  list: Recordable = []
  async handleSearch() {
    const db = wx.cloud.database()
    const { data: accidentde } = await db
      .collection('accidentde')
      .where({ idCard: this.keyword })
      .get()
    const { data: intelligence } = await db
      .collection('intelligence')
      .where({ idCard: this.keyword })
      .get()
    this.$set(this.list, 0, accidentde)
    this.$set(this.list, 1, intelligence)
    // this.list[0] = accidentde
    // this.list[1] = intelligence
  }
  onLoad() {
    console.log('onload')
  }
  handle2Detail(_id: string) {
    uni.navigateTo({
      url: './accidentDetails?_id=' + _id
    })
  }
  get stateMap() {
    return stateMap
  }
  expandIds: Array<any> = []
  handleExpand(id: string) {
    const index = findIndex(this.expandIds, (i) => i === id)
    if (index >= 0) {
      this.expandIds.splice(+index, 1)
      return
    }
    this.expandIds.push(id)
  }
}
</script>

<template>
  <view class="p-20rpx">
    <u-search
      v-model="keyword"
      placeholder="请输入身份证号查询"
      bg-color="#fff"
      shape="square"
      @search="handleSearch"
      @blur="handleSearch"
    />

    <view class="mt-20rpx">
      <template v-if="list.length === 2">
        <view>
          <view class="text-30rpx text-first mb-10rpx">数据来源：警总平台</view>
          <view
            v-for="i in list[0]"
            :key="i._id"
            class="mb-20rpx flex justify-between items-center bg-white rounded-16rpx p-20rpx item"
            @click="handle2Detail(i._id)"
          >
            <view>
              <view class="truncate w-560rpx">{{ i.desc }}</view>
              <view class="text-26rpx mt-10rpx text-#999">{{ i.time }}</view>
            </view>
            <view
              class="text-28rpx"
              :style="{ color: stateMap[i.state].color }"
            >
              {{ stateMap[i.state].label }}
            </view>
          </view>
        </view>
        <view>
          <view class="text-30rpx text-first mb-10rpx">数据来源：情报专栏</view>
          <view
            v-for="i in list[1]"
            :key="i._id"
            style="transition: 300ms; margin-bottom: 20rpx"
            :class="
              (expandIds.includes(i._id) ? 'h-630rpx' : 'h-78rpx') +
              ' p-20rpx overflow-hidden mb-20rpx bg-white rounded-10rpx'
            "
          >
            <view
              class="flex justify-between items-center"
              @click="handleExpand(i._id)"
            >
              <text class="text-first text-base">{{ i.name }}</text>
              <view class="text-first text-base flex items-center">
                {{ i.createTime }}
                <u-icon
                  :name="expandIds.includes(i._id) ? 'arrow-up' : 'arrow-down'"
                  color="#666"
                  size="12"
                ></u-icon>
              </view>
            </view>
            <view class="text-first text-base py-10rpx">
              <view>
                <text>涉事人姓名：</text>
                {{ i.name }}
              </view>
            </view>
            <view class="text-first text-base py-10rpx">
              <text>涉事人员身份证：</text>
              {{ i.idCard }}
            </view>
            <view class="text-first text-base py-10rpx">
              <text>事故类型：</text>
              {{ i.type }}
            </view>
            <view class="text-first text-base py-10rpx">
              <text>发生时间：</text>
              {{ i.time }}
            </view>
            <view class="text-first text-base py-10rpx">
              <view>事故描述：</view>
              <view class="h-200rpx overflow-auto">
                {{ i.desc }}
              </view>
            </view>
          </view>
        </view>
      </template>
      <u-empty
        v-else
        margin-top="36%"
        icon="https://ui-resourse.oss-cn-shenzhen.aliyuncs.com/picture/2022/03/17/aUXPlIYfLUqWTgQl.png"
        text="这里空空的"
      />
    </view>
  </view>
</template>

<style scoped lang="scss">
.item {
  border-bottom: 1rpx solid #eee;
  &:last-child {
    border-bottom: none;
  }
}
</style>
